@charset "utf-8";
/* CSS Document */









/*main */

#main{margin: 0 auto;}


#main .title{position: relative;z-index:10;}
#main .title>span{ position: relative; display: block; font-size: 4.8rem; font-family: Arial; font-weight: bold; text-transform: uppercase;color: rgba(0,91,97,1); background-image:-webkit-linear-gradient(right bottom,rgba(0,91,97,1),rgba(14,189,201,1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#main .title>h3{display: block; font-size: 2.3rem; color: #333;font-weight: normal;}

#main>.banner{position:relative;background:#fff; height:100%; overflow:hidden; transition:all .35s;}
#main>.banner .mc{ position: absolute;z-index: 60; left: 14%; top: 48%;}
#main>.banner .mc>.tit{ position: relative;z-index: 30; font-size: 6rem; font-weight: bold; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.3);}
#main>.banner .mc>.lump{ display: none; position: absolute; z-index: 10; left: -40px; top: -20px;  width: 110px; height: 110px; background: rgba(0,91,97,1);background:linear-gradient(to right bottom,rgba(0,91,97,1),rgba(14,189,201,1));}
#main>.banner .mc>.txt{ position: relative;z-index: 30; padding: 20px 0; font-size: 2rem; font-weight: bold; color: #fff;text-shadow: 0 1px 4px rgba(0,0,0,.1);}
#main>.banner .video_img{display: none;}
#main>.banner .swiper{height: 100%;}
#main>.banner .swiper-wrapper{height: 100%;}
#main>.banner .swiper-slide{height: 100%;}
#main>.banner .swiper-slide .img{ position: relative; width:100%;height:100%; background-position: 50% 50%;background-size: cover;}
#main>.banner .swiper-slide .img>img{display: none;}
#main>.banner .swiper-slide .img>video{ position:absolute; z-index:2; left: 0;top: 0; width: 100%;}
#main>.banner .swiper-pagination{ bottom: 30px!important;}
#main>.banner .swiper-pagination .swiper-pagination-bullet{ width: 12px!important;height: 12px!important; background: rgba(255,255,255,1);opacity: .6;}
#main>.banner .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; background-color: rgba(14,189,201,1) !important;}




#main>.product{height: 100%; background: url("../img/main_product_bg.jpg") no-repeat; background-size: cover; background-position: left top;}
#main>.product .title{padding-top: 100px; text-align: center; }

#main>.product .box-head{ position: relative; top: 0; left: 0; width: 100%; height: 36%; background: #fff;}
#main>.product .box-head .tab-nav{ position: absolute;z-index: 20; left: 50%;bottom: 0;  margin-left: -43%; width: 86%;}
#main>.product .box-head .tab-nav>ul{ margin: 0 auto;}
#main>.product .box-head .tab-nav>ul>li{ position: relative; display: block; float: left; width: 16.66%; text-align: center;}
#main>.product .box-head .tab-nav>ul>li:after{ position: absolute;z-index: 3; left: 0;bottom: 0;width: 0; height: 3px; background: rgba(14,189,201,1); content: '';transition: all .35s;}
#main>.product .box-head .tab-nav>ul>li>a{ position: relative;z-index: 60; display: block; font-size: 1.6rem; color: #333; padding: 15px 0; transition: all .35s;}
#main>.product .box-head .tab-nav>ul>li>a>img{ display: inline-block; height: 60px; margin-right: 10px;}
#main>.product .box-head .tab-nav>ul>li.active>a{color: rgba(14,189,201,1);}
#main>.product .box-head .tab-nav>ul>li.active:after{width: 100%;}

#main>.product .box-down{ width: 100%; height: 64%; box-sizing: border-box;}
#main>.product .box-down .tab-box{ position: relative; width: 86%;max-width: 1280px; height: 100%; box-sizing: border-box; margin: 0 auto; padding: 120px 0;}
#main>.product .box-down .tab-box>.tab-item{ display:none; text-align: left;}
#main>.product .box-down .tab-box>.current{display: block;}
#main>.product .box-down .tab-box .swiper-slide .img{width: 50%; float: left;}
#main>.product .box-down .tab-box .swiper-slide .img>img{width: 100%;height: auto;}
#main>.product .box-down .tab-box .swiper-slide .box{width: 50%; box-sizing: border-box;padding: 50px 50px 50px 100px; float: right;}
#main>.product .box-down .tab-box .swiper-slide .box>.tit{font-size: 3.6rem;  font-weight: bold; color: rgba(0,0,0,.7);}
#main>.product .box-down .tab-box .swiper-slide .box>.txt{ padding: 30px 0; font-size: 1.6rem; line-height: 2.4rem; color: rgba(0,0,0,.4);}
#main>.product .box-down .tab-box .swiper-slide .box>.more{padding-top: 20px;}
#main>.product .box-down .tab-box .swiper-slide .box>.more>span{display: inline-block;border: 1px solid rgba(14,189,201,1); padding: 10px 20px; font-size: 1.4rem; color: rgba(14,189,201,1); border-radius: 5px; transition: all .35s;}
#main>.product .box-down .tab-box .swiper-slide .box>.more>span>i{color: rgba(14,189,201,1);}
#main>.product .box-down .tab-box .swiper-slide .box>.more:hover span{ color: rgba(14,189,201,1); border: 1px solid rgba(14,189,201,1);}
#main>.product .box-down .tab-box .swiper-pagination{ bottom: 20px;}
#main>.product .box-down .tab-box .swiper-pagination-bullet{ width: 6px!important; height: 6px!important; transition: all .35s;}
#main>.product .box-down .tab-box .swiper-pagination-bullet-active{ opacity: .7!important; width: 30px!important; background-color: rgba(0,91,97,1) !important; border-radius: 5px!important;}
#main>.product .box-down .tab-box .prev{position: absolute;z-index: 60; top: 50%; left: -15%; cursor: pointer; text-align: center; width: 80px;height: 80px; line-height: 80px; color: rgba(0,0,0,.3); transition:all .35s;}
#main>.product .box-down .tab-box .prev>i{font-size: 8rem;}
#main>.product .box-down .tab-box .next{position: absolute;z-index: 60; top: 50%; right: -15%; cursor: pointer; text-align: center; width: 80px;height: 80px; line-height: 80px; color: rgba(0,0,0,.3);transition:all .35s;}
#main>.product .box-down .tab-box .next>i{font-size: 8rem;}
#main>.product .box-down .tab-box .prev:hover, #main>.product .box-down .tab-box .next:hover{color: rgba(0,91,97,.6);}



#main>.about{ height: 100%; background: #fcfcfc; overflow: hidden;}
#main>.about .container{height: 100%;}
#main>.about:after{position: absolute;z-index: 1; left: -6%;bottom: -40%; width: 100%; height: 100%;opacity: .03; background:url("../img/logo_big.png") no-repeat; content: '';}
#main>.about .box-l{ position: relative;z-index: 90; width: 50%; text-align: left; box-sizing: border-box;padding:14% 8% 0 8%;}
#main>.about .box-l>.profile{ padding: 30px 0; text-align: left; font-size: 1.6rem;color: #666; line-height: 2.4rem;}
#main>.about .box-l>.profile>p{margin-bottom: 20px;}
#main>.about .box-l>.statistics{padding: 20px 0; border-bottom: 1px solid #ddd;}
#main>.about .box-l>.statistics>.item{display: block;float: left; box-sizing: border-box; width: 25%; text-align: center;}
#main>.about .box-l>.statistics>.item>.num{ font-size: 4rem; color: rgba(0,91,97,1);}
#main>.about .box-l>.statistics>.item>.num>span{display: inline-block;vertical-align: top; font-size: 4rem;}
#main>.about .box-l>.statistics>.item>.num>em{ position: relative; top:-5px;font-size: 2.2rem; font-weight: bold; padding: 0 5px; font-style: normal;}
#main>.about .box-l>.statistics>.item>.txt{font-size: 1.6rem; color: #666;}
#main>.about .box-l>.more{text-align:left; padding-top: 40px;}
#main>.about .box-l>.more>a{ display: inline-block; padding: 8px 20px;border: 1px solid #ddd; font-size: 1.6rem; color: #999;transition: all .35s;}
#main>.about .box-l>.more>a>i{ margin-left: 10px; float:right;color: rgba(0,91,97,1); font-size: 2rem; transition: all .35s;}
#main>.about .box-l>.more>a:hover{background: rgba(0,91,97,1); padding-right: 30px; border: 1px solid #fff; color: #fff;}
#main>.about .box-l>.more>a:hover i{color: #fff; transform: translateX(10px);}

#main>.about .box-r{ position: absolute;z-index: 10; right: 0; top:0; width: 46%; height: 100%;overflow: hidden;  background: rgba(0,91,97,1);}
#main>.about .box-r>.video{ position: relative; height: 100%; text-align: center;}
#main>.about .box-r>.video>.img{ width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; }
#main>.about .box-r>.video>.img>img{display: none;}
#main>.about .box-r>.video>a{position: absolute; display: block; top:50%; left:50%; width: 100px; height: 100px; transform: translate(-50%, -50%); }
#main>.about .box-r>.video>a>.icon{width: 100%; height: 100%; background:url("../img/play_button.png") center/contain no-repeat;}
#main>.about .box-r>.video>a:before{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1;}
#main>.about .box-r>.video>a:after{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1; }
#main>.about .box-r>.video>a:before{animation:scale 2s ease-out infinite; background:#fff; opacity:0.5; animation-delay:0;}
#main>.about .box-r>.video>a:after{animation:scale2 2s ease-out infinite; background:#fff; opacity:0.3; animation-delay:0;}
@keyframes scale{0%{transform:translate(-50%, -50%) scale(1); opacity:.9} 100%{transform:translate(-50%, -50%) scale(7); opacity:0;}}
@keyframes scale2{0%{transform:translate(-50%, -50%) scale(1); opacity:.9;} 100%{transform:translate(-50%, -50%) scale(10);opacity:0;}}



#main>.solution{ position: relative; height: 100%;}
#main>.solution .title{position: absolute;z-index: 90; right: 10%;top: 16%; text-align: right;}
#main>.solution .container{margin: 0 auto; height: 100%;}



#main>.solution .tab-nav{ position: absolute;z-index: 90; right: 0;bottom: 0; width: 50%; background: #fff; text-align: right;}
#main>.solution .tab-nav>ul>li{ position: relative; display: inline-block;  vertical-align: top; float: left; width: 25%;height: 200px; background: rgba(255,255,255,1); transition: all .35s;}
#main>.solution .tab-nav>ul>li:nth-child(2n){background: rgba(0,91,97,0.06);}
#main>.solution .tab-nav>ul>li>a{ display: block; height: 100%; padding-top: 30px; box-sizing: border-box; font-size: 1.6rem; text-align: center; transition: all .35s;}
#main>.solution .tab-nav>ul>li>a>img{ display: block; margin: 0 auto; height: 80px;width: auto;}
#main>.solution .tab-nav>ul>li>a:hover{background: rgba(0,91,97,1); background:linear-gradient(to right bottom,rgba(14,189,201,1),rgba(14,189,201,1));}
#main>.solution .tab-nav>ul>li>a:hover p{color: rgba(0,91,97,1);}


#main>.solution .tab-box{position: relative; padding: 0; height: 100%;}
#main>.solution .tab-box>.tab-item{ position: relative; display:none; height: 100%; text-align: left;}
#main>.solution .tab-box>.tab-item>.box{position: absolute;z-index: 90; left: 0;bottom: 30%;width: 40%; padding: 100px 8%; background: rgba(0,0,0,.7); box-sizing: border-box;}
#main>.solution .tab-box>.tab-item>.box>.tit{font-size: 3rem; color: #fff;}
#main>.solution .tab-box>.tab-item>.box>.txt{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: rgba(255,255,255,.8);}
#main>.solution .tab-box>.tab-item>.box>.more{text-align:left; padding-top: 40px;}
#main>.solution .tab-box>.tab-item>.box>.more>a{ display: inline-block; padding: 8px 20px;  border: 1px solid rgba(14,189,201,.8); font-size: 1.6rem; color: rgba(14,189,201,.8);transition: all .35s;}
#main>.solution .tab-box>.tab-item>.box>.more>a>i{ margin-left: 10px; float:right;color: rgba(14,189,201,.8); font-size: 2rem; transition: all .35s;}
#main>.solution .tab-box>.tab-item>.box>.more>a:hover{background: rgba(255,255,255,1); padding-right: 30px; border: 1px solid rgba(255,255,255,1); color: rgba(14,189,201,1); box-shadow: 0 1px 8px rgba(0,0,0,.2); }
#main>.solution .tab-box>.tab-item>.box>.more>a:hover i{color: rgba(14,189,201,1); transform: translateX(10px);}
#main>.solution .tab-box>.tab-item>.img{ position: relative; z-index: 10; width: 100%; height: 100%; background-position: 0 0; background-size: auto;}
#main>.solution .tab-box>.tab-item>.img>img{display: none;}
#main>.solution .tab-box>.current{display: block;}






#main>.news{height: 100%; background: url("../img/main_news_bg.jpg") no-repeat; background-size: cover; background-position: 50% 50%;}
#main>.news .title{padding-top: 100px; text-align: center;}
#main>.news .container{margin: 0 auto; padding: 50px 0;}
#main>.news .container .swiper-wrapper{padding: 20px 0;}
#main>.news .container .swiper-slide{display: block; overflow: hidden;  transition: all .35s;}
#main>.news .container .swiper-slide>a{ overflow: hidden; transition: all .35s;}
#main>.news .container .swiper-slide>a>.img{ position: relative; text-align: center;overflow: hidden;}
#main>.news .container .swiper-slide>a>.img>img{width: 100%;height: auto;transition: all 1.3s;}
#main>.news .container .swiper-slide>a>.img>span{position: absolute;z-index: 20; left: 20px;bottom: 0;width: auto;padding: 8px 20px;font-size: 1.6rem; color: #fff; background: rgba(14,189,201,.8);}
#main>.news .container .swiper-slide>a>.box{text-align: left;padding: 30px 20px; height: 190px; box-sizing: border-box; transition: all .35s;}
#main>.news .container .swiper-slide>a>.box>.time{font-size: 1.4rem; color: #999;}
#main>.news .container .swiper-slide>a>.box>.tit{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; margin: 10px 0; transition: all .35s;}
#main>.news .container .swiper-slide>a>.box>.tit>span{font-size:1.8rem; font-weight:700; color:#333; width: calc(100%);background-image: linear-gradient(transparent calc(100% - 1px), #229ea6 1px);background-repeat: no-repeat;background-size: 0 100%;transition: background-size 0.3s;}
#main>.news .container .swiper-slide>a>.box>.txt{font-size: 1.6rem; color: #999; line-height: 2.4rem; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
#main>.news .container .swiper-slide>a:hover .img>img{transform: scale(1.1);}
#main>.news .container .swiper-slide>a:hover .box>.tit>span{color: rgba(0,91,97,1);background-size: 100% 100%;}
#main>.news .container .swiper-slide:hover{ transform: translateY(-10px); background: rgba(255,255,255,.8); box-shadow: 0 0 3px rgba(0,0,0,.1);}
#main>.news .container .button{ position: absolute;z-index: 100; left: 50%;bottom: 50px; margin-left: -25%; width: 50%; text-align: center; }
#main>.news .container .button>a{display: inline-block; vertical-align: top; width: 46px; text-align: center; height: 46px; line-height: 46px; }
#main>.news .container .button>a.more{ width: auto; padding: 0 30px; font-size: 1.6rem; color: rgba(0,91,97,1);transition: all .35s;}
#main>.news .container .button>a.prev>i, #main>.news .container .button>a.next>i{ font-size: 2.4rem; color: #ccc; transition: all .35s;}
#main>.news .container .button>a.prev:hover i, #main>.news .container .button>a.next:hover i{color: rgba(0,91,97,1);}
#main>.news .container .button>a:hover{ background: #eee; border-radius: 10px;}



#main>.service{height: 100%;}
#main>.service .title{padding-top: 100px; text-align: center;}
#main>.service .container{ position: relative; margin: 50px auto;}
#main>.service .container>.box-l{ position: relative;z-index: 90; width: 60%; text-align: left; box-sizing: border-box;}
#main>.service .container>.box-l>.purpose{position: absolute;z-index: 20; left: 10%; bottom: 20%; width: 50%;}
#main>.service .container>.box-l>.purpose>.tit{font-size: 3.6rem; color: #fff;}
#main>.service .container>.box-l>.purpose>.txt{ padding: 20px 0; font-size: 1.6rem; color: rgba(255,255,255,.8); line-height: 2.6rem;}
#main>.service .container>.box-l>.purpose>.more{text-align:left; padding-top: 40px;}
#main>.service .container>.box-l>.purpose>.more>a{ display: inline-block; padding: 8px 20px; background: rgba(14,189,201,.8); border: 1px solid rgba(14,189,201,.8); font-size: 1.6rem; color: rgba(255,255,255,1);transition: all .35s;}
#main>.service .container>.box-l>.purpose>.more>a>i{ margin-left: 10px; float:right;color: rgba(255,255,255,.8); font-size: 2rem; transition: all .35s;}
#main>.service .container>.box-l>.purpose>.more>a:hover{background: rgba(255,255,255,1); padding-right: 30px; border: 1px solid rgba(255,255,255,1); color: rgba(14,189,201,1); box-shadow: 0 1px 8px rgba(0,0,0,.2); }
#main>.service .container>.box-l>.purpose>.more>a:hover i{color: rgba(14,189,201,1); transform: translateX(10px);}
#main>.service .container>.box-l>.img{ text-align: left;}
#main>.service .container>.box-l>.img>img{width: 100%; height: auto;}

#main>.service .container>.box-r{ position: absolute; top: 0; left: 60%; width: 30%; height: 100%; background: #fff;}
#main>.service .container>.box-r>.item{display: list-item;float: left;width: 50%; height: 50%; box-sizing: border-box; text-align: center; border: 1px solid #eee; transition: all .35s;}
#main>.service .container>.box-r>.item:nth-child(1),#main>.service .container>.box-r>.item:nth-child(2){border-top: 2px solid #eee;}
#main>.service .container>.box-r>.item:nth-child(2),#main>.service .container>.box-r>.item:nth-child(4){border-right: 2px solid #eee;}
#main>.service .container>.box-r>.item:nth-child(3),#main>.service .container>.box-r>.item:nth-child(4){border-bottom: 2px solid #eee;}
#main>.service .container>.box-r>.item>a{display: block; height: 100%; box-sizing: border-box;padding-top: 28%; transition: all .35s;}
#main>.service .container>.box-r>.item>a .icon{text-align: center; transition: all .35s;}
#main>.service .container>.box-r>.item>a .icon>i{font-size: 6rem; color: rgba(14,189,201,1); transition: all .35s;}
#main>.service .container>.box-r>.item>a .tit{ padding: 10px 0; font-size: 1.8rem; color: #333;font-weight: bold; transition: all .6s;}
#main>.service .container>.box-r>.item:hover{background: rgba(14,189,201,.1); border-color:rgba(14,189,201,.05);}
#main>.service .container>.box-r>.item:hover .icon{ transform: translateY(-5px);}
#main>.service .container>.box-r>.item:hover .icon>i{color: rgba(0,91,97,1);}
#main>.service .container>.box-r>.item:hover .tit{color: rgba(0,91,97,1);transform: translateY(-5px);}

#video{ display: none; position: fixed;z-index: 900; left: 50%;top: 50%; width: 800px;height: 500px;overflow: hidden; transform: translate(-50%,-50%); background: rgba(0,0,0,.8); box-shadow: 0 1px 12px rgba(0,0,0,.2);}
#video>.close{position: absolute;z-index: 10; right: 20px;top: 20px; cursor: pointer;}
#video>.close>i{font-size: 2rem; color: #fff; }
#video>.media{ display: none; position: absolute;z-index: 3; left: 0;bottom: 0; width: 100%;height: 100%;}
#video>iframe{ position: absolute;z-index: 3; left: 0;bottom: 0; width: 100%;height: 100%;}

@media only screen and (max-width: 1670px) {

    #main>.banner .swiper-slide .img>video{ transform: scale(1.1);}

}
@media only screen and (max-width: 1620px) {
    #main>.banner .swiper-slide .img>video{ transform: scale(1.2);}
}




@media only screen and (max-width: 1560px) {

    #main>.banner .swiper-slide .img>video{ transform: scale(1.3);}


    #main>.product .box-head .tab-nav>ul>li>a {font-size: 1.6rem;}
    #main>.product .box-down .tab-box .swiper {width: 90%;}
    #main>.product .box-down .tab-box .swiper-slide .box>.tit {font-size: 3rem;}
    #main>.product .box-down .tab-box .prev{left: -5%;}
    #main>.product .box-down .tab-box .next{right: -5%;}




    #main>.about .box-l>.statistics>.item>.num{ font-size: 3.2rem;}
    #main>.about .box-l>.statistics>.item>.num>span{font-size: 3.2rem;}
    #main>.about .box-l>.statistics>.item>.num>em{font-size: 2rem;}

}

@media only screen and (max-width: 1500px) {

    #main>.banner .swiper-slide .img>video{ transform: scale(1.4);}

}
@media only screen and (max-width: 1480px) {

    #main>.banner .swiper-slide .img>video{ transform: scale(1.46);}

    #main>.solution .tab-nav{ width: 60%;}
    #main>.solution .tab-box>.tab-item>.box{width: 56%;}

    #main>.service .container>.box-l>.purpose>.tit {font-size: 3.2rem;}



}

@media only screen and (max-width: 1380px) {

    #main>.banner .mc>.tit{ font-size: 4.2rem;}
    #main>.banner .mc>.lump{ top: -35px; width: 100px; height: 100px;}
    #main>.banner .mc>.txt{ font-size: 1.8rem;}


    #main>.banner {height: 720px!important;}
    #main>.banner .fp-tableCell {height: 720px!important;}

    #main>.product {height: 700px!important;}
    #main>.product .title {padding-top: 60px;}
    #main>.product .fp-tableCell {height: 700px!important;}

    #main>.product .box-head{height: auto; transition: all .35s;}
    #main>.product .box-head .tab-nav{position: relative; padding-top: 60px;}
    #main>.product .box-head .tab-nav>ul>li {width: 33.33%;}
    #main>.product .box-down {height: auto;}


    #main>.about .box-l {padding:20% 8% 60px 8%; height: 100%;}
    #main>.about .box-l>.profile {font-size: 1.4rem;}
    #main>.about .box-l>.statistics>.item>.num{ font-size: 3rem;}
    #main>.about .box-l>.statistics>.item>.num>span{font-size: 2.8rem;}


}

@media only screen and (max-width: 1280px) {

    #main>.banner .mc>.tit{ font-size: 3.6rem;}
    #main>.banner .mc>.lump{ width: 90px; height: 90px;}
    #main>.banner .mc>.txt{ font-size: 1.6rem;}


    #main>.about .box-l{ width: 60%;}
    #main>.about .box-r{width: 40%;}

    #main>.about .box-l>.more>a{ padding: 5px 16px;font-size: 1.4rem; }
    #main>.about .box-l>.more>a>i{ font-size: 1.8rem;}


    #main>.solution .tab-nav{ width: 100%;}
    #main>.solution .tab-box>.tab-item>.box{width: 70%;}
    #main>.solution .tab-box>.tab-item>.box>.tit{font-size: 2.8rem;}
    #main>.solution .tab-box>.tab-item>.box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}
    #main>.solution .tab-box>.tab-item>.box>.more>a{ padding: 5px 16px; font-size: 1.4rem;}
    #main>.solution .tab-box>.tab-item>.box>.more>a>i{ font-size: 1.8rem;}

    #main>.service .title {padding-top:50px;}
    #main>.service .container>.box-l>.purpose {width: 60%;}
    #main>.service .container>.box-l>.purpose>.tit {font-size: 2.8rem;}
    #main>.service .container>.box-l>.purpose>.txt {font-size: 1.4rem;line-height: 2rem;}
    #main>.service .container>.box-l>.purpose>.more>a{ padding: 5px 16px; font-size: 1.4rem;}
    #main>.service .container>.box-l>.purpose>.more>a>i{ font-size: 1.8rem;}
    #main>.service .container>.box-r>.item>a .icon>i {font-size: 5rem;}
    #main>.service .container>.box-r>.item>a .tit {font-size: 1.6rem;}


    #main>.news .title {padding-top: 50px;}

}
@media only screen and (max-width: 1080px) {

    #main .title>span{ font-size: 3.6rem;}
    #main .title>h3{font-size: 2rem; }



    #main>.banner {height: 520px!important;}
    #main>.banner .fp-tableCell {height: 520px!important;}
    #main>.banner .swiper-slide .img>video{display: none;}
    #main>.banner .mc>.tit{ font-size: 3rem;}
    #main>.banner .mc>.lump{ width: 80px; height: 80px;}
    #main>.banner .mc>.txt{ font-size: 1.4rem;font-weight: normal;}

    #main>.product {height: 500px!important;}
    #main>.product .fp-tableCell {height: 500px!important;}

    #main>.product .box-down .tab-box .swiper-slide .img {width: 55%;}
    #main>.product .box-down .tab-box .swiper-slide .box{width: 45%;}
    #main>.product .box-down .tab-box .swiper-slide .box {padding: 10px 0 10px 60px;}
    #main>.product .box-down .tab-box .swiper-slide .box>.tit {font-size: 2.6rem;}
    #main>.product .box-down .tab-box .swiper-slide .box>.txt {font-size: 1.4rem;line-height: 2rem;}
    #main>.product .box-down .tab-box .prev>i,#main>.product .box-down .tab-box .next>i {font-size: 6rem;}

    #main>.about .box-l{ width: 100%; height: auto;  float: none;}
    #main>.about .box-r{ position: relative; width: 100%; height: 350px; float: none;}
    #main>.about .title { text-align: center;}
    #main>.about .box-l>.more {text-align: center;}


    #main>.solution .title { left: 0; right: auto; width: 100%; text-align: center;}


}


@media only screen and (max-width: 980px) {

    #main>.service .container{ position: relative; margin: 50px auto;}
    #main>.service .container>.box-l{ float: none; width:100%;}
    #main>.service .container>.box-r{ position: relative;left: 0; width: 80%; height: auto; padding-top: 50px; margin: 0 auto;}
    #main>.service .container>.box-r>.item{width: 25%;}
    #main>.service .container>.box-r>.item:nth-child(1),#main>.service .container>.box-r>.item:nth-child(2){border-top: 1px solid #eee;}
    #main>.service .container>.box-r>.item:nth-child(2),#main>.service .container>.box-r>.item:nth-child(4){border-right: 1px solid #eee;}
    #main>.service .container>.box-r>.item:nth-child(3),#main>.service .container>.box-r>.item:nth-child(4){border-bottom: 1px solid #eee;}
    #main>.service .container>.box-r>.item>a {padding: 30px 0;}


}



@media only screen and (max-width: 860px) {

    #main>.banner {height: 460px!important;}
    #main>.banner .fp-tableCell {height: 460px!important;}

    #main>.banner .mc>.tit{ font-size: 2.4rem;}
    #main>.banner .mc>.lump{ width: 50px; height: 50px;}

    #main>.product .box-head .tab-nav { padding-top: 30px;}
    #main>.product .box-head .tab-nav>ul>li>a>img {height: 45px;}
    #main>.product .box-head .tab-nav>ul>li>a {font-size: 1.5rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
    #main>.product .box-down .tab-box .swiper-slide .img {width: 80%; float: none; margin: 0 auto;}
    #main>.product .box-down .tab-box .swiper-slide .box{width: 100%;float: none; margin: 0 auto; padding: 20px 0 0 0; text-align: center;}
    #main>.product .box-down .tab-box .swiper-slide .box>.tit {font-size: 1.8rem;}
    #main>.product .box-down .tab-box .swiper-slide .box>.txt{display: none;}


    #main>.solution .tab-nav>ul>li {height: 160px;}
    #main>.solution .tab-box>.tab-item>.box{width: 100%; padding: 50px 8%; bottom: 160px;}
    #main>.solution .tab-box>.tab-item>.box>.more {padding-top: 20px;}

    #video{ width: 700px;height: 420px;}


}

@media only screen and (max-width: 780px) {

    #main>.banner {height: 380px!important;}
    #main>.banner .fp-tableCell {height: 380px!important;}
    #main>.banner .mc {top: 56%;}
    #main>.banner .mc>.lump{ top: -10px; left: -30px;}
    #main>.banner .mc>.txt {padding:5px 20px;}

    #main>.product .box-down .tab-box {padding: 60px 0;}

    #main>.solution {height: 800px!important;}
    #main>.solution .fp-tableCell {height: 800px!important;}

    #main>.service .container>.box-r>.item{width: 50%;}
    #main>.service .container>.box-r>.item:nth-child(1),#main>.service .container>.box-r>.item:nth-child(3){border-left: 2px solid #eee;}
    #main>.service .container>.box-r>.item:nth-child(1),#main>.service .container>.box-r>.item:nth-child(2){border-top: 2px solid #eee;}
    #main>.service .container>.box-r>.item:nth-child(2),#main>.service .container>.box-r>.item:nth-child(4){border-right: 2px solid #eee;}
    #main>.service .container>.box-r>.item:nth-child(3),#main>.service .container>.box-r>.item:nth-child(4){border-bottom: 2px solid #eee;}



    #main>.about .box-r{  height: 240px;}
    #main>.about .box-r>.video>a>.icon{ background-size: 70px auto; }
    #main>.about .box-r>.video>a:before{ width:18px; height:18px; }
    #main>.about .box-r>.video>a:after{width:18px; height:18px; }

    #video{ width: 600px;height: 350px;}

}

@media only screen and (max-width: 640px) {

    #main>.banner .mc>.tit{ font-size: 2.2rem;}
    #main>.banner .mc>.lump{ left: -20px; width: 50px; height: 50px;}
    #main>.banner .mc>.txt{display: none;}


    #main>.product .box-head .tab-nav>ul>li {width: 50%;}
    #main>.product .box-head .tab-nav>ul>li>a>img{display: block;margin: 0 auto;}

    #main>.news .container .swiper-slide>a>.box>.time{font-size: 1.2rem;}
    #main>.news .container .swiper-slide>a>.box>.tit>span{font-size:1.6rem;}
    #main>.news .container .swiper-slide>a>.box>.txt{font-size: 1.4rem; line-height: 2rem;}


    #main>.service .container>.box-l>.purpose{bottom: 16%; width: 80%;}
    #main>.service .container>.box-l>.purpose>.tit{font-size: 2.4rem;}
    #main>.service .container>.box-l>.purpose>.more {padding-top: 20px;}

    #video{ width: 500px;height: 300px;}

}

@media only screen and (max-width: 520px) {

    #main .title>span {font-size: 3rem;}

    #main>.banner .mc{left: 20%; width: 60%;}
    #main>.banner .mc>.tit { font-size: 1.8rem; }


    #main>.product .box-down .tab-box { padding: 60px 0; }
    #main>.product .box-down .tab-box .prev>i,#main>.product .box-down .tab-box .next>i {font-size: 4rem;}
    #main>.product .box-down .tab-box .swiper-slide .box>.more>span {padding: 6px 12px;font-size: 1.2rem;}
    #main>.product .box-down .tab-box .swiper-slide .box>.more>span>i { font-size: 1.2rem;}

    #main>.about .box-l>.statistics>.item {width: 50%;}
    #main>.about .box-l>.more {padding-top: 20px;}

    #main>.solution .tab-box>.tab-item>.box {padding: 30px 8%;bottom: 200px;}
    #main>.solution .tab-box>.tab-item>.box>.tit {font-size: 2.4rem;}

    #main>.solution .tab-nav>ul>li {height: 100px;background: rgba(0,91,97,0.06);}
    #main>.solution .tab-nav>ul>li:nth-child(2n) { background: #fff; }
    #main>.solution .tab-nav>ul>li>a{ padding-top: 10px; font-size: 1.4rem;}
    #main>.solution .tab-nav>ul>li>a>img {height: 50px;}

    #video{ width: 86%;height: 200px;}

}